<template>
  <div class="recommend">
    <div class="recommend-title" >热销推荐</div>
    <div class="recommend-infos" v-for="item in recommendLists" :key="item.index">
      <div class="recommend-info">
        <div class="img-info">
          <img class="img-content" :src="item.imgUrl" :alt="item.title">
        </div>
        <div class="min-desc">
          <p class="min-desc-title">{{item.title}}</p>
          <p class="min-desc-info">{{item.desc}}</p>
          <p class="min-desc-price"><span class="min-desc-price-sty">￥<span class="min-desc-price-info-sty">{{item.price}}</span></span>&nbsp起</p>
        </div>
      </div>
    </div>
    <div class="recommend-buttom"><a href="">查看所有产品</a></div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendLists: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
.recommend
  width 100%
  height 100%
  .recommend-buttom
    width: 100%
    height .8rem
    line-height .8rem
    text-align center
  .recommend-title
    width 100%
    height 0.7rem;
    line-height 0.7rem
    background #dadada
    text-indent 0.2rem
    font-weight bold
    font-family '微软雅黑'
  .recommend-infos
    width 100%
    height 100%
    .recommend-info
      border-bottom 1px solid #d0d0d0;
      width 95%
      height 2rem
      display flex
      margin-left 5%
      .img-info
        height 100%
        width 2.65rem
        .img-content
          position: relative;
          top: 50%;
          left: 0%;
          transform: translate(-0%,-50%);
          width 80%
       .min-desc
         position: relative;
         top: 50%;
         transform: translate(-5%,-50%);
         width 100%
         height 80%
         .min-desc-title
           font-weight bold
           font-size 0.3rem
           font-family '黑体'
           margin-bottom .2rem
         .min-desc-info
           font-size .25rem
           font-family '黑体'
           font-weight 500
           color #bebebe
           margin-bottom .3rem
           font-size .2rem
         .min-desc-price
           color #bebebe
           font-size .1.8rem
           .min-desc-price-sty
             color #ff8b63
             .min-desc-price-info-sty
               font-weight bold
               font-size .4rem
</style>
